<script setup lang="ts">
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, ref, watch } from 'vue'
import { ViewData } from '@/api/types/userType'
import { useValidator } from '@/hooks/web/useValidator'
import { ElButton, ElDivider, ElInput, ElInputNumber, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
import api from '@/api';
const { required} = useValidator()

const {getCourseList}=api
const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<ViewData>>,
    default: () => null
  },
  formSchema: {
    type: Array as PropType<FormSchema[]>,
    default: () => []
  }
})
const data=ref([]);
const tableObject=ref();
const optionItem=ref([])
const { register, methods, elFormRef } = useForm({schema: props.formSchema});
const rules = reactive({
  name: [required()],
})
const pageLoad=async()=>{
  const res=await getCourseList();
  optionItem.value=res.data;
} 
pageLoad();
watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return;
    const { setValues } = methods;
    setValues(currentRow) ; 
    data.value=currentRow.items;  
    elFormRef;
  },
  {
    deep: true,
    immediate: true
  }
)
watch(
  () => data,
  (data) => {
    if (!data) return;
    const { setValues } = methods;
    console.log(JSON.stringify(data.value))
    setValues({items:JSON.stringify(data.value)}) ;   
  },
  {
    deep: true,
    immediate: true
  }
)
const addItem=()=>{
  if(!data.value)data.value=[];
    data.value.push({phase:"",courses:[],hour:""})
}
const delItem=()=>{  
    data.value=data.value.filter(obj=>tableObject.value.indexOf(obj)<0);
}
defineExpose({
  elFormRef,
  getFormData: methods.getFormData
})
</script>

<template>
  <Form :rules="rules"  @register="register" >    
      <template #userName v-if="currentRow!=null">
        <span>{{currentRow?.userName}}
        </span>        
      </template>
  </Form>
  <div class="mb-1">
        <ElButton size="small" type="primary" @click="addItem">添加</ElButton>
        <ElButton size="small" type="danger" @click="delItem">删除</ElButton>
    </div>
  <ElTable border size="small" :data="data" ref="tableRef" @selection-change="(val)=>{tableObject=val}"> 
        <ElTableColumn type="selection"/>
        <ElTableColumn prop="phase" label="期数" width="120px">
            <template #default="scope">
                <ElInput v-model="scope.row.phase"/>
            </template>
        </ElTableColumn>
        <ElTableColumn prop="courses" label="课程">
            <template #default="scope">
                <ElSelect filterable allow-create clearable multiple v-model="scope.row.courses" style="width: 100%;">
                  <ElOption v-for="(item,index) in optionItem" :label="item.joinName" :value="item.id" :key="index"/>
                </ElSelect>
            </template>
        </ElTableColumn>
        <ElTableColumn prop="hour" label="课时" width="200px">
            <template #default="scope">
                <ElInputNumber size="small" v-model="scope.row.hour"/>
            </template>
        </ElTableColumn>
    </ElTable>
</template>
